<template>
  <page class="app-container">
    <!-- 过滤条件 begin-->
    <el-form :inline="true" class="filter-container">
      <el-form-item prop="shopId" label="当前门店">
        <shop-select v-model="dataForm.shopId"></shop-select>
      </el-form-item>
      <el-form-item>
        <el-button class="filter-item" type="primary" @click="onAdd">添加油枪</el-button>
      </el-form-item>
    </el-form>
    <!-- 过滤条件 end-->

    <!-- 表格 begin-->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="gunCode" label="枪号" align="center" min-width="90"></el-table-column>
      <el-table-column align="center" label="油品">
        <template slot-scope="props">
          {{props.row.oilCode | oilName}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="单价(元/升)">
        <template slot-scope="props">
          {{props.row.price / 100}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="市场价(元/升)">
        <template slot-scope="props">
          {{props.row.publicPrice / 100}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <el-button type="text" size="small" slot-scope="props" @click.native="onDel(props.row.id)">删除</el-button>
      </el-table-column>
    </el-table>
    <!-- 表格 end-->

    <!--编辑 or 添加 弹窗 begin-->
    <el-dialog title="添加油枪" :visible.sync="dialogShow">
      <el-form ref="dataForm" :model="dataForm" label-position="left" label-width="120px"
               style='width: 400px; margin-left:50px;'>
        <el-form-item label="油品" prop="oilCode" :rules="[{required: true, message: '请选择油品'}]">
          <oil-select v-model="dataForm.oilCode" :auto="false"></oil-select>
        </el-form-item>

        <el-form-item label="枪号" prop="gunCode" :rules="[{required: true, message: '请输入枪号'}, isGunCodeReplace]">
          <el-input-number v-model="dataForm.gunCode" :max="99" :min="1" controls-position="right"></el-input-number>
        </el-form-item>

        <el-form-item label="单价(元/升)" prop="price" :rules="[{required: true, message: '请输入单价'}]">
          <el-input-number v-model="price" :max="1000" :min="0" controls-position="right"></el-input-number>
        </el-form-item>

        <el-form-item label="市场价(元/升)" prop="publicPrice" :rules="[{required: true, message: '请输入市场价'}]">
          <el-input-number v-model="publicPrice" :max="1000" :min="0" controls-position="right"></el-input-number>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </div>
    </el-dialog>
    <!--编辑 or 添加 弹窗 begin-->
  </page>
</template>
<script>
  import {moneyMap, elValidate} from '@/utils/widget'
  import {status_prompt, confirm_handler} from '@/utils/feedback'

  export default {
    name: 'oilGun',
    data() {
      // 验证油枪号重复
      const isGunCodeReplace = {
        validator: (rule, value, callback) => {
          this.list.some(x => x.gunCode == value) ? callback(new Error('油枪号重复')) : callback()
        }, trigger: 'blur'
      }
      return {
        list: [],
        dialogShow: false,
        isGunCodeReplace,
        dataForm: {
          oilCode: null,
          shopId: null,
          price: null,
          publicPrice: null
        }
      }
    },
    computed: {
      price: moneyMap('dataForm.price'),
      publicPrice: moneyMap('dataForm.publicPrice')
    },
    methods: {
      // 增
      add() {
        return status_prompt({
          ajax: () => this.$post_json('admin/shop/addGunInfo', this.dataForm),
          success_text: '添加成功',
          fail_text: '添加失败'
        }).then(this.getList)
      },

      // 获取列表
      async getList() {
        let {obj} = await this.$get('admin/shop/getGunInfoByShopId', this.dataForm)
        document.documentElement.scrollTop = 0
        this.list = obj
      },
      // 更新数据
      update() {

      },

      onAdd() {
        this.dialogShow = true
      },
      onDel(gunInfoId) {
        return confirm_handler({
          ajax: () => this.$post('admin/shop/deleteGunInfo', {gunInfoId}),
          hint: '确认删除该油枪'
        }).then(this.getList)
      },
      onUpdate() {
      },
      async onSubmit() {
        await elValidate(this, 'dataForm')
        this.dialogShow = false
        await this.add()
        await this.$nextTick()
        this.$refs.dataForm.resetFields()
      }
    },
    watch: {
      'dataForm.shopId'() {
        this.getList()
      }
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
